<template>
  <div class="vacation-process">
    <a-card>
      <h2>请假流程</h2>
      <a-divider></a-divider>
      <div class="content">
        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-content" v-if="current==0">
          <a-form ref="formRef" :model="form" :rules="rules" v-bind="layout">
            <a-form-item label="请假时间" name="time">
              <a-range-picker v-model:value="form.time" @change="dateChange" />
            </a-form-item>
            <a-form-item label="请假理由" name="reason">
              <a-textarea v-model:value="form.reason" />
            </a-form-item>
            <a-button style="margin-left:40px" @click="submit" type="primary">提交</a-button>
          </a-form>
        </div>
        <div class="steps-content" style="text-align:center" v-if="current==1">
          <div class="wait-content">
            请耐心等待审批
            <a-descriptions>
              <a-descriptions-item label="请假开始时间">{{info.startTime}}</a-descriptions-item>
              <a-descriptions-item label="请假结束时间">{{info.endTime}}</a-descriptions-item>
              <a-descriptions-item label="请假内容">{{info.reason}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
        <div class="steps-content" v-if="current==2">
          <div v-if="info.state==1">
            <div class="success-content">
              <a-descriptions title="本次请假已通过">
                <a-descriptions-item label="请假开始时间">{{info.startTime}}</a-descriptions-item>
                <a-descriptions-item label="请假结束时间">{{info.endTime}}</a-descriptions-item>
                <a-descriptions-item label="请假内容">{{info.reason}}</a-descriptions-item>
              </a-descriptions>
              <span style="font-size:16px;font-weight:bold"> 历史请假</span>
              <a-descriptions v-for="(item,index) in historyList" :key="index">
                <a-descriptions-item label="请假开始时间">{{item.startTime}}</a-descriptions-item>
                <a-descriptions-item label="请假结束时间">{{item.endTime}}</a-descriptions-item>
                <a-descriptions-item label="请假内容">{{item.reason}}</a-descriptions-item>
              </a-descriptions>
            </div>

          </div>
          <div v-if="info.state==2">
             <a-descriptions title="本次请假被否决">
                <a-descriptions-item label="请假开始时间">{{info.startTime}}</a-descriptions-item>
                <a-descriptions-item label="请假结束时间">{{info.endTime}}</a-descriptions-item>
                <a-descriptions-item label="请假内容">{{info.reason}}</a-descriptions-item>
              </a-descriptions>
          </div>
          <div class="buttons-group" style="text-align:right">
            <a-button type="primary" @click="current=0">发起新请假</a-button>
          </div>
        </div>
      </div>
    </a-card>

  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { vacation } from "../../service/index";
import { result } from "../../utils/result";
import store from "../../store/index";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const current = ref();
    const next = () => {
      current.value++;
    };
    const prev = () => {
      current.value--;
    };
    const form = ref({
      time: [],
      reason: "",
    });
    const rules = {
      time: [
        {
          required: true,
          message: "请选择请假时间",
        },
      ],
      reason: [{ required: true, message: "请输入原因" }],
    };
    const steps = ref([
      {
        title: "请假信息",
      },
      {
        title: "审批中",
      },
      {
        title: "请假结果",
      },
    ]);
    const formRef = ref();
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    /**提交 */
    const submitForm = ref({
      userId: "",
      vacationPerson: "",
      startTime: "",
      endTime: "",
      reason: "",
      state: 0,
    });
    const dateChange = (date, dateString) => {
      console.log("日期change", date, dateString);
      submitForm.value.startTime = dateString[0];
      submitForm.value.endTime = dateString[1];
    };
    const userId = ref("");

    const submit = async () => {
      formRef.value.validate().then(async () => {
        submitForm.value.reason = form.value.reason;
        submitForm.value.userId = userId.value;
        submitForm.value.vacationPerson = store.state.userInfo.username;

        const res = await vacation.add(submitForm.value);
        result(res).success(({ data }) => {
          //成功进入下一tab页面
          current.value = 1;
          //更新请假状态
          getVacationState();
        });
      });
    };
    let info = ref({}); //请假信息
    const historyList = ref([]); //历史请假
    /**查询当前用户请假状态 //0信息 1审核  */
    const getVacationState = async () => {
      const res = await vacation.getVacationState(userId.value);
      if (res.data.code == 200) {
        message.success(res.data.msg);
        info.value = res.data.data.list[0];
        historyList.value = res.data.data.list;
        if (!info.value) {
          console.log("不存在请假");
          current.value = 0;
        } else {
          if (info.value.state == 0) {
            current.value = 1; //审批中
          } else if (info.value.state == 1) {
            current.value = 2; //通过
          } else {
            current.value = 2; //否决  state为2否决
          }
        }
      }
    };
    onMounted(() => {
      userId.value = store.state.userInfo._id;
      getVacationState();
    });
    return {
      layout,
      form,
      formRef,
      rules,
      submit,
      steps,
      current,
      next,
      prev,
      dateChange,
      submitForm,
      info, //请假信息
      historyList,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.steps-content) {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  padding: 16px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

:deep(.steps-action) {
  margin-top: 24px;
}
</style>